<template>
  <div>
    <!-- v-model表单数据的双向绑定 -->
    <h3>{{ userinfo.username }}</h3>
    <div>
      <label>
        账号：
        <!-- lazy 让输入框失去焦点时，更新数据源 -->
        <input type="text" v-model.lazy="userinfo.username" />
      </label>
    </div>
    <div>
      <label>
        密码：
        <input type="text" v-model="userinfo.password" />
      </label>
    </div>
    <div>
      <!-- 多行文本 -->
      介绍：
      <textarea cols="30" rows="10" v-model="userinfo.intro"></textarea>
    </div>
    <div>
      是否记住用户：
      <!-- 复选框只用于是否勾选，v-model绑定的值为布尔类型 -->
      <input type="checkbox" v-model="userinfo.remember" />
    </div>
    <div>
      爱好：
      <!-- 复选框可以选多个，则一定要设置value,value值中的数据在数据源数组中，则勾选 -->
      <input type="checkbox" value="html" v-model="userinfo.hobies" />html
      <input type="checkbox" value="css" v-model="userinfo.hobies" />css
      <input type="checkbox" value="js" v-model="userinfo.hobies" />js
    </div>
    <div>
      单选：
      <!-- 单选需要设置value值 -->
      <input type="radio" value="先生" v-model="userinfo.sex" />先生
      <input type="radio" value="女士" v-model="userinfo.sex" />女士
    </div>
    <div>
      下拉
      <!-- 也是要设置value值 -->
      <select v-model="userinfo.selected">
        <option value="0">全选</option>
        <option value="1">html</option>
        <option value="2">css</option>
        <option value="3">vue</option>
      </select>
    </div>
    <div>
      <!-- number把字符串数据转为数字，一般在购物车环境中 -->
      <input type="text" v-model.number="num1" />
      +
      <input type="text" v-model.number="num2" />
      =
      <span>{{ num1 + num2 }}</span> ---
      <!-- 计算属性 -->
      <span>{{ sum }}</span>
    </div>
    <div>
      <!-- trim方便解决前后空格问题 -->
      <input type="text" v-model.trim="title" />
      |{{ title }}|
    </div>
    <div>
      <button @click="login">进入系统</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {
        username: "admin",
        password: "admin888",
        intro: "aaabbccc",
        remember: true,
        // 多选，是以数组的方式
        hobies: [],
        // 单选是以字符串的方式
        sex: "先生",
        // 以字符串的方式
        selected: "0",
      },
      num1: 0,
      num2: 0,
      title: "",
    };
  },
  // 计算属性
  computed: {
    sum() {
      return this.num1 + this.num2;
    },
  },
  methods: {
    // 登录
    login() {
      // 当用户点击进入系统按钮后，得到数据源中的数据，从而进行数据请求
      console.log(this.userinfo);
    },
  },
};
</script>

<style lang="scss">
</style>
